<!-- 项目详细信息 -->
<template>
  <div class="main-wrapper">
    <el-form ref="dataForm" :model="projectData" label-position="left" label-width="110px">
      <el-form-item label="项目名称">
        <span>{{ projectData.name }}</span>
      </el-form-item>
      <el-form-item label="项目发布方">
        <span>{{ projectData.employerName }}</span>
      </el-form-item>
      <el-form-item label="所属省市">
        <span>{{ projectData.cityName }}</span>
      </el-form-item>
      <el-form-item label="项目价格">
        <span>{{ projectData.price }}</span>
      </el-form-item>
      <el-form-item label="项目类型">
        <span>{{ projectData.categoryName }}</span>
      </el-form-item>
      <el-form-item label="专业">
        <span>{{ projectData.professionName }}</span>
      </el-form-item>
      <el-form-item label="专业图片">
        <img :src="getFullFileUrl(projectData.imgUrl)" class="image">
      </el-form-item>
      <el-form-item label="项目承接方">
        <span>{{ projectData.contractorName }}</span>
      </el-form-item>
      <el-form-item label="合同时间">
        <span>{{ projectData.expectTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
      </el-form-item>
      <el-form-item label="完成时间">
        <span>{{ projectData.endTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{ projectData.createTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
      </el-form-item>
      <el-form-item label="状态">
        <el-tag :type="projectData.status | styleFilter()">{{ projectData.statusName }}</el-tag>
      </el-form-item>
      <el-form-item label="发单方联系方式">
        <span>{{ projectData.empPhone }}</span>
      </el-form-item>
      <el-form-item label="接单方联系方式">
        <span>{{ projectData.contPhone }}</span>
      </el-form-item>
      <el-form-item label="项目文档">
        <project-file-list class="document" :file-list="projectData.emplFiles" />
      </el-form-item>
      <el-form-item label="提交文档">
        <project-file-list class="document" :file-list="projectData.contractFiles" />
      </el-form-item>
      <el-form-item label="项目描述">
        <div style="white-space: pre-wrap;">{{ projectData.description }}</div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <router-link to="/project/list"><el-button>关闭</el-button></router-link>
    </div>
  </div>
</template>

<script>
import { getImageUrl, parseTime } from '@/utils'
import { getProject } from '@/api/project'
import ProjectFileList from '@/components/ProjectFileList'

export default {
  // import引入的组件需要注入到对象中
  components: {
    ProjectFileList
  },
  filters: {
    styleFilter(style) {
      const styleMap = { 1: 'success', 0: 'danger' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    }
  },
  data() {
    // 存放数据
    return {
      projectData: {}
    }
  },
  // 生命周期 - 创建完成
  created() {
    const id = this.$route.params && this.$route.params.id
    this.fetchProjectInfo(id)
  },
  // 方法
  methods: {
    fetchProjectInfo(id) {
      getProject(id).then(res => {
        this.projectData = res.data
        console.log(this.projectData)
      })
    },
    getFullFileUrl(file) {
      return getImageUrl(file)
    }
  }
}
</script>
<style lang='scss' scoped>
// @import url(); // 引入公共css类
.main-wrapper {
  margin: 28px;
  .dialog-footer {
    text-align: center;
  }
  .document {
    margin: 0;
  }
  .image {
    width: 274px;
    height: 152px;
  }
}
</style>
